<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加小说</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
</head>
<body>


<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">

  <div class="layui-form-item">
    <label class="layui-form-label">活动标题</label>
    <div class="layui-input-block">
      <input type="hidden" name="id" value="{if $info}{$info.id}{/if}">
      <input type="text" name="title" required lay-verify="required|title" autocomplete="off" class="layui-input"
             placeholder="自定义填写" value="{if $info}{$info.title}{/if}">
    </div>
  </div>

  <div class="layui-form-item">
      <label class="layui-form-label">充值金额</label>
      <div class="layui-input-block">
        <input type="number" name="total_fee" lay-verify="required|number" autocomplete="off" class="layui-input" value="{if $info}{$info.item.total_fee_text}{/if}" placeholder="起吊订单的金额">
      </div>
  </div>


  <div class="layui-form-item">
      <label class="layui-form-label">套餐选择</label>
      <div class="layui-input-block">
        <select name="vipdays" lay-verify="required" lay-filter="vipdays">
          <option value="0" {if !$info}selected{/if}>书币 / 书点</option>
          <option value="365" {if $info && $info.item.vipdays == 365}selected{/if}>包年</option>
          <option value="90" {if $info && $info.item.vipdays == 90}selected{/if}>包季</option>
          <option value="30" {if $info && $info.item.vipdays == 30}selected{/if}>包月</option>
        </select>
      </div>
  </div>


    <div class="layui-form-item">
        <label class="layui-form-label">充值次数</label>
        <div class="layui-input-block">
            <input type="radio" name="pay_times" value="0" title="不限" {if $info && $info.pay_times == 0}checked{/if} checked>
            <input type="radio" name="pay_times" value="1" title="一次" {if $info && $info.pay_times == 1}checked{/if}>
        </div>
    </div>

    <div class="layui-form-item pt" {if $info && $info.item.vipdays > 0}style="display: none;"{/if}>
      <label class="layui-form-label">获得书币</label>
      <div class="layui-input-block">
        <input type="number" name="virtual_currency" id="virtual_currency" lay-verify="number" autocomplete="off" class="layui-input" value="{if $info}{$info.item.virtual_currency}{else /}0{/if}" placeholder="充值后添加的书币">
      </div>
  </div>

  <div class="layui-form-item pt" {if $info && $info.item.vipdays > 0}style="display: none;"{/if}>
      <label class="layui-form-label">赠送书点</label>
      <div class="layui-input-block">
        <input type="number" name="point_gift" id="point_gift" lay-verify="number" autocomplete="off" class="layui-input" value="{if $info}{$info.item.point_gift}{else /}0{/if}" placeholder="充值后添加的书点">
      </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">活动页图片</label>
    <div class="layui-input-block">
      <div class="layui-upload-drag" id="cover" style="width: 248px;">
        <div id="cover_head" class="{if $info}layui-hide{/if}">
          <i class="layui-icon"></i>
          <p>点击上传，或将文件拖拽到此处</p>
        </div>
        <div class="{if !$info}layui-hide{/if}" id="uploadDemoView">
          <img src="{if $info}__IMG_DOMAIN__{$info.img_url}{/if}" alt="上传成功后渲染" style="max-width: 128px;width: 128px;">
          <input type="hidden" name="img_url" value="{if $info}{$info.img_url}{/if}">
        </div>
      </div>

      <div class="layui-form-mid layui-word-aux" style="float:unset;">推荐分辨率：1024 x 1887</div>
    </div>
  </div>

    <div class="layui-form-item">
        <label class="layui-form-label">弹窗图片</label>
        <div class="layui-input-block">
            <div class="layui-upload-drag" id="cover2" style="width: 248px;">
                <div id="cover_head2" class="{if $info}layui-hide{/if}">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
                <div class="{if !$info}layui-hide{/if}" id="uploadDemoView2">
                    <img src="{if $info}__IMG_DOMAIN__{$info.pop_img}{/if}" alt="上传成功后渲染" style="max-width: 128px;width: 128px;">
                    <input type="hidden" name="pop_img" value="{if $info}{$info.pop_img}{/if}">
                </div>
            </div>
        </div>
    </div>



    <div class="layui-form-item layui-hide">
    <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
  </div>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'laydate'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,laydate = layui.laydate
            ,layer = layui.layer
            ,form = layui.form
            ,upload = layui.upload;


    laydate.render({
      elem: '#startDate'
      ,type: 'datetime'
    });

    laydate.render({
      elem: '#endDate'
      ,type: 'datetime'
    });


    form.on('select(vipdays)', function(data){
      if (data.value > 0){
        $("#virtual_currency").val(0);
        $("#point_gift").val(0);
        $(".pt").css('display','none');
      }else {
        $(".pt").css('display','block');
      }
    });



    //拖拽上传
    upload.render({
      elem: '#cover'
      ,accept:'images'
      ,acceptMime: 'image/jpeg, image/png'
      ,url: '/tool/uploadPic' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      ,done: function(res){
        if (res.code !== 0){
          layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.picUrl);
          layui.$('#uploadDemoView').find('input').val(res.data.filePath);
          layui.$('#cover_head').addClass('layui-hide');
          console.log(res)
        }else {
          layer.msg(res.msg);
        }
      }
    });

      upload.render({
          elem: '#cover2'
          ,accept:'images'
          ,acceptMime: 'image/jpeg, image/png'
          ,url: '/tool/uploadPic' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
          ,done: function(res){
              if (res.code !== 0){
                  layui.$('#uploadDemoView2').removeClass('layui-hide').find('img').attr('src', res.data.picUrl);
                  layui.$('#uploadDemoView2').find('input').val(res.data.filePath);
                  layui.$('#cover_head2').addClass('layui-hide');
                  console.log(res)
              }else {
                  layer.msg(res.msg);
              }
          }
      });



    /* 自定义验证规则 */
    form.verify({
      title: function(value){
        if(value.length > 20){
          return '字数过长';
        }
      }
    });
  });
</script>
</body>
</html>
